<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		body {
			font-size: 12px;
			font-family: Arial;
		}
		
		a {
			color: #999;
		}
		
		a:hover {
			text-decoration: none;
			color: #C40000;
		}
		
		div.cartProductChangeNumberDiv a {
			width: 14px;
			display: inline-block;
			text-align: center;
			color: black;
			text-decoration: none;
		}
		
		img.cartProductItemIfSelected, img.selectAllItem {
			cursor: pointer;
		}
		
		tr.cartProductItemTR {
			border: 1px solid #CCCCCC;
		}
		
		div.cartProductChangeNumberDiv {
			border: solid 1px #E5E5E5;
			width: 80px;
		}
		
		table.cartProductTable {
			width: 100%;
			font-size: 12px;
		}
		
		span.cartProductItemOringalPrice {
			text-decoration: line-through;
			color: #9C9C9C;
			display: block;
			font-weight: bold;
			font-size: 14px;
		}
		
		div.cartProductChangeNumberDiv input {
			border: solid 1px #AAAAAA;
			width: 42px;
			display: inline-block;
		}
		
		div.cartProductChangeNumberDiv a {
			text-decoration: none;
		}
		
		img.cartProductImg {
			padding: 1px;
			border: 1px solid #EEEEEE;
			width: 80px;
			height: 80px;
		}
		
		a.cartProductLink {
			color: #3C3C3C;
		}
		
		a.cartProductLink:hover {
			color: #C40000;
			text-decoration: underline;
		}
		
		div.cartProductLinkOutDiv {
			position: relative;
			height: 80px;
		}
		
		span.cartSumNumber {
			color: #C40000;
			font-weight: bold;
			font-size: 16px;
		}
		
		tr.cartProductItemTR td {
			padding: 20px 20px;
		}
		
		span.cartSumPrice {
			color: #C40000;
			font-weight: bold;
			font-size: 20px;
		}
		
		span.cartProductItemPromotionPrice {
			font-family: Arial;
			font-size: 14px;
			font-weight: bold;
			color: #C40000;
		}
		
		span.cartProductItemSmallSumPrice {
			font-family: Arial;
			font-size: 14px;
			font-weight: bold;
			color: #C40000;
		}
		
		span.cartTitlePrice {
			color: #C40000;
			font-size: 14px;
			font-weight: bold;
			margin-left: 5px;
			margin-right: 3px;
		}
		
		div.cartProductLinkInnerDiv {
			position: absolute;
			bottom: 0;
			height: 20px;
		}
		
		div.cartTitle button {
			background-color: #AAAAAA;
			border: 1px solid #AAAAAA;
			color: white;
			width: 53px;
			height: 25px;
			border-radius: 2px;
		}
		
		div.cartFoot {
			background-color: #E5E5E5;
			line-height: 50px;
			margin: 20px 0px;
			color: black;
			padding-left: 20px;
		}
		
		div.cartFoot button {
			background-color: #AAAAAA;
			border: 0px solid #AAAAAA;
			color: white;
			height: 100%;
			width: 120px;
			height: 50px;
			font-size: 20px;
			text-align: center;
		}
		
		table.cartProductTable th {
			font-weight: normal;
			color: #3C3C3C;
			padding: 20px 20px;
		}
		
		table.cartProductTable th.selectAndImage {
			width: 140px;
		}
		
		table.cartProductTable th.operation {
			width: 30px;
		}
		
		div.cartDiv {
			max-width: 1013px;
			margin: 10px auto;
			color: black;
		}
	</style>
	<script>
		/* 格式化金额 */
        function formatMoney(num) {
            num = num.toString().replace(/\$|\,/g, '');
            if (isNaN(num))
                num = "0";
            sign = (num == (num = Math.abs(num)));
            num = Math.floor(num * 100 + 0.50000000001);
            cents = num % 100;
            num = Math.floor(num / 100).toString();
            if (cents < 10)
                cents = "0" + cents;
            for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                num = num.substring(0, num.length - (4 * i + 3)) + ',' +
                    num.substring(num.length - (4 * i + 3));
            return (((sign) ? '' : '-') + num + '.' + cents);
        }
        
        /* 判断是否有商品选中 */
		function syncCreateOrderButton() {
		    var selectAny = false;
		    $(".cartProductItemIfSelected").each(function () {
		        if ("selectit" == $(this).attr("selectit")) {
		            selectAny = true;
		        }
            });
		    if (selectAny) {
		        $("button.createOrderButton").css("backgroundColor", "#C40000");
		        // 可点击
		        $("button.createOrderButton").removeProp("disabled");
		    } else {
		        $("button.createOrderButton").css("backgroundColor", "#AAAAAA");
		        $("button.createOrderButton").prop("disabled", "disabled");
		    }
		}
		
		/* 同步全选状态 */
		function syncSelect() {
		    var selectAll = true;
		    $(".cartProductItemIfSelected").each(function () {
		        if ("false" == $(this).attr("selectit")) {
		            selectAll = false;
		        }
            });
		    if (selectAll) {
		        $("img.selectAllItem").prop("src", "https://how2j.cn/tmall/img/site/cartSelected.png");
		    } else {
                $("img.selectAllItem").prop("src", "https://how2j.cn/tmall/img/site/cartNotSelected.png");
		    }
		}
		
		/* 显示被选中的商品总数，以及总价格 */
		function calcCartSumPriceAndNumber() {
		    var sum = 0;
		    var totalNum = 0;
		    $("img.cartProductItemIfSelected[selectit='selectit']").each(function () {
		        var oiid = $(this).attr("oiid");
		        var price = $(".cartProductItemSmallSumPrice[oiid=" + oiid + "]").text();
		        price = price.replace(/,/g, "");
		        price = price.replace(/￥/g, "");
		        sum += new Number(price);
		        var num = $(".orderItemNumberSetting[oiid=" + oiid + "]").val();
		        totalNum += new Number(num);
            });
		    
		    $("span.cartSumPrice").html("￥" + formatMoney(sum));
            $("span.cartTitlePrice").html("￥" + formatMoney(sum));
            $("span.cartSumNumber").html(totalNum);
		}
		
		/* 根据商品数量和价格，统计总价 */
		function syncPrice(pid, num, price) {
		    $(".orderItemNumberSetting[pid=" + pid + "]").val(num);
		    var cartProductItemSmallSumPrice = formatMoney(num * price);
		    $(".cartProductItemSmallSumPrice[pid=" + pid + "]").html("￥" + cartProductItemSmallSumPrice);
		    calcCartSumPriceAndNumber();
		}

        $(function () {
            /* 选中商品 */
            $("img.cartProductItemIfSelected").click(function () {
                var selectit = $(this).attr("selectit");
                if ("selectit" == selectit) {
                    $(this).attr("src", "https://how2j.cn/tmall/img/site/cartNotSelected.png");
                    $(this).attr("selectit", "false");
                    $(this).parents("tr.cartProductItemTR").css("backgroundColor", "#FFFFFF");
                } else {
                    $(this).attr("src", "https://how2j.cn/tmall/img/site/cartSelected.png");
                    $(this).attr("selectit", "selectit");
                    $(this).parents("tr.cartProductItemTR").css("backgroundColor", "#FFF8E1");
                }
                syncSelect();
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();
            });
            
            /* 商品全选 */
            $("img.selectAllItem").click(function () {
                var selectit = $(this).attr("selectit");
                if ("selectit" == selectit) {
                    $("img.selectAllItem").attr("src", "https://how2j.cn/tmall/img/site/cartNotSelected.png");
                    $("img.selectAllItem").attr("selectit", "false");
                    $(".cartProductItemIfSelected").each(function () {
                        $(this).attr("src", "https://how2j.cn/tmall/img/site/cartNotSelected.png");
                        $(this).attr("selectit","false");
                        $(this).parents("tr.cartProductItemTR").css("backgroundColor", "#FFFFFF");
                    });
                } else {
                    $("img.selectAllItem").attr("src", "https://how2j.cn/tmall/img/site/cartSelected.png");
                    $("img.selectAllItem").attr("selectit", "selectit");
                    $("img.cartProductItemIfSelected").each(function () {
                        $(this).attr("src", "https://how2j.cn/tmall/img/site/cartSelected.png");
                        $(this).attr("selectit", "selectit");
                        $(this).parents("tr.cartProductItemTR").css("backgroundColor", "#FFF8E1");
                    });
                }
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();
            });
            
            /* 增加和减少数量 */
	        $(".numberPlus").click(function () {
	            var pid = $(this).attr("pid");
	            var stock = $("span.orderItemStock[pid=" + pid + "]").text();
	            var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();
	            var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();
	            num++;
	            if (num > stock) {
	                num = stock;
	            }
                if (num <= 0) {
                    num = 1;
                }
	            syncPrice(pid, num, price);
            });
	        $(".numberMinus").click(function () {
	            var pid = $(this).attr("pid");
                var stock = $("span.orderItemStock[pid=" + pid + "]").text();
	            var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();
	            var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();
	            num--;
	            if (num <= 0) {
	                num = 1;
	            }
                if (num > stock) {
                    num = stock;
                }
	            syncPrice(pid, num, price);
            });
	        
	        /* 监听直接修改数量时动作 */
	        $(".orderItemNumberSetting").keyup(function () {
	            var pid = $(this).attr("pid");
	            var stock = $("span.orderItemStock[pid=" + pid + "]").text();
	            var price = $("span.orderItemPromotePrice[pid=" + pid + "]").text();
	            var num = $(".orderItemNumberSetting[pid=" + pid + "]").val();
	            num = parseInt(num);
	            if (isNaN(num)) {
	                num = 1;
	            }
                if (num <= 0) {
                    num = 1;
                }
                if (num > stock) {
                    num = stock;
                }
                syncPrice(pid, num, price);
            });
        });
	</script>
</head>
<body>
	<div class="cartDiv">
		<div class="cartTitle pull-right">
			<span>已选商品  (不含运费)</span>
			<span class="cartTitlePrice">￥0.00</span>
			<button class="createOrderButton" disabled="disabled" style="background-color: rgb(170, 170, 170);">结 算
			</button>
		</div>
		<div class="cartProductList">
			<table class="cartProductTable">
				<thead>
					<tr>
						<th class="selectAndImage">
							<img class="selectAllItem" selectit="false"
							     src="https://how2j.cn/tmall/img/site/cartNotSelected.png">
							全选
						</th>
						<th>商品信息</th>
						<th>单价</th>
						<th>数量</th>
						<th width="120px">金额</th>
						<th class="operation">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="cartProductItemTR" oiid="936" style="background-color: rgb(255, 255, 255);">
						<td>
							<img class="cartProductItemIfSelected"
							     oiid="936" selectit="false" src="https://how2j.cn/tmall/img/site/cartNotSelected.png">
							<a href="#nowhere" style="display:none"><img
									src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
							<img class="cartProductImg" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg">
						</td>
						<td>
							<div class="cartProductLinkOutDiv">
								<a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
								<div class="cartProductLinkInnerDiv">
									<img src="https://how2j.cn/tmall/img/site/creditcard.png" title="支持信用卡支付">
									<img src="https://how2j.cn/tmall/img/site/7day.png" title="消费者保障服务,承诺7天退货">
									<img src="https://how2j.cn/tmall/img/site/promise.png" title="消费者保障服务,承诺如实描述">
								</div>
							</div>
						</td>
						<td>
							<span class="cartProductItemOringalPrice">￥7580.0</span>
							<span class="cartProductItemPromotionPrice">￥5306.0</span>
						</td>
						<td>
							<div class="cartProductChangeNumberDiv">
								<span class="hidden orderItemStock " pid="365">75</span>
								<span class="hidden orderItemPromotePrice " pid="365">5306.0</span>
								<a class="numberMinus" href="#nowhere" pid="365">-</a>
								<input autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365" value="1">
								<a class="numberPlus" href="#nowhere" pid="365" stock="75">+</a>
							</div>
						</td>
						<td>
                            <span class="cartProductItemSmallSumPrice" oiid="936" pid="365">
                            ￥5,306.00
                            </span>
						</td>
						<td>
							<a class="deleteOrderItem" href="#nowhere" oiid="936">删除</a>
						</td>
					</tr>
					<tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);">
						<td>
							<img class="cartProductItemIfSelected"
							     oiid="935" selectit="false" src="https://how2j.cn/tmall/img/site/cartNotSelected.png">
							<a href="#nowhere" style="display:none"><img
									src="https://how2j.cn/tmall/img/site/cartSelected.png"></a>
							<img class="cartProductImg" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg">
						</td>
						<td>
							<div class="cartProductLinkOutDiv">
								<a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
								<div class="cartProductLinkInnerDiv">
									<img src="https://how2j.cn/tmall/img/site/creditcard.png" title="支持信用卡支付">
									<img src="https://how2j.cn/tmall/img/site/7day.png" title="消费者保障服务,承诺7天退货">
									<img src="https://how2j.cn/tmall/img/site/promise.png" title="消费者保障服务,承诺如实描述">
								</div>
							</div>
						</td>
						<td>
							<span class="cartProductItemOringalPrice">￥235.0</span>
							<span class="cartProductItemPromotionPrice">￥152.75</span>
						</td>
						<td>
							<div class="cartProductChangeNumberDiv">
								<span class="hidden orderItemStock " pid="809">17</span>
								<span class="hidden orderItemPromotePrice " pid="809">152.75</span>
								<a class="numberMinus" href="#nowhere" pid="809">-</a>
								<input autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809" value="1">
								<a class="numberPlus" href="#nowhere" pid="809" stock="17">+</a>
							</div>
						</td>
						<td>
                            <span class="cartProductItemSmallSumPrice" oiid="935" pid="809">
                            ￥152.75
                            </span>
						</td>
						<td>
							<a class="deleteOrderItem" href="#nowhere" oiid="935">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="cartFoot">
			<img class="selectAllItem" selectit="false" src="https://how2j.cn/tmall/img/site/cartNotSelected.png">
			<span>全选</span>
			<!--         <a href="#">删除</a> -->
			<div class="pull-right">
				<span>已选商品 <span class="cartSumNumber">0</span> 件</span>
				<span>合计 (不含运费): </span>
				<span class="cartSumPrice">￥0.00</span>
				<button class="createOrderButton" disabled="disabled" style="background-color: rgb(170, 170, 170);">结
					算
				</button>
			</div>
		</div>
	</div>
</body>
</html>